<template>
	<div id="special">
		<el-container>
			<div class="top">
				<el-input placeholder="请输入专题标题" clearable v-model="dcika"></el-input>
				<el-input placeholder="请输入专题子标题" clearable v-model="dcikb"></el-input>
				<el-select v-model="matter" clearable placeholder="请选择优惠券类型">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="lookup">查找</el-button>
				<download-excel :data="tableData" :fields="daocu" name="special-manage.xls">
					<el-button type="primary" icon="el-icon-download">导出</el-button>
				</download-excel>
			</div>
			<div class="tjsc">
				<el-button type="primary" icon="el-icon-edit" @click="chuangjian">添加</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="plschu">批量删除</el-button>
			</div>
			<el-main>
				<el-table ref="multipleTable" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
					style="width: 100%" border>
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="title" label="专题标题"></el-table-column>
					<el-table-column prop="subtitle" label="专题子标题"></el-table-column>
					<el-table-column prop="picUrl" label="广告图片">
						<template slot-scope="scope">
							<img :src="scope.row.picUrl" style="width: 60%; height: 70%;">
						</template>
					</el-table-column>
					<el-table-column prop="content" label="专题详情">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="chakan(scope.$index, scope.row)">查看
							</el-button>
						</template>
					</el-table-column>
					<el-table-column label="底价" prop="sortOrder"></el-table-column>
					<el-table-column prop="readCount" label="阅读数量"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="bianji(scope.$index, scope.row)">编辑
							</el-button>
							<el-button size="mini" type="danger" @click="deletes(scope.$index)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<!-- 通知详情 -->
			<el-dialog title="通知详情" :visible.sync="dialogVisible" center width="50%">
				<span v-html="lrong"></span>
			</el-dialog>
			<!-- 分页 -->
			<el-footer>
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40,50,100]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="page">
				</el-pagination>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	import {
		ztlist, //列表数据
		ztchazao, //查找
		ztbatches, //批量删除
		ztremove, //删除
		//分页
		ztjfen,
		ztfeng,
	} from '@/api/http.js'
	export default {
		data() {
			return {
				tableData: [], //通知列表渲染
				dialogVisible: false, //控制详情弹窗
				lrong: '', //查看
				scid: [], //批量删除
				options: [{
					value: 0,
					label: '按时间排序'
				}, {
					value: 1,
					label: '按序号排序'
				}, {
					value: 2,
					label: '按价格排序'
				}],
				// 查找
				dcika: '',
				dcikb: '',
				matter:'',
				page: 0, //分页
				daocu: {
					"专题标题": "title",
					"专题子标题": "subtitle",
					"广告图片": "picUrl",
					"专题详情": "content",
					"底价": "sortOrder",
					"阅读数量": "readCount"
				},
			}
		},
		mounted() {
			this.getAdmin()
		},
		methods: {
			//获取通知列表数据 列表渲染
			getAdmin() {
				ztlist().then((res) => {
					this.tableData = res.data.data.list
					this.page = res.data.data.total
					console.log(res.data.data.list)
				})
			},
			// 查找
			lookup() {
				ztchazao(this.dcika, this.dcikb).then(res => {
					this.tableData = res.data.data.list
				})
			},
			// 查看
			chakan(index, row) {
				this.dialogVisible = true
				this.lrong = row.content
			},
			// 跳转创建页面
			chuangjian() {
				this.$router.push({
					path: '/promotion/tjia',
				})
			},
			// 跳转编辑页面
			bianji(index, row) {
				this.$router.push({
					path: '/promotion/bji'
				})
				sessionStorage.setItem("row", JSON.stringify(row))

			},
			//删除
			deletes(index) {
				let data = {
					id: this.tableData[index].id
				}
				ztremove(data).then((res) => {
					// console.log(res)//测试
					this.$notify({
						title: '成功',
						message: '删除广告成功',
						type: 'success'
					});
					this.getAdmin();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//批量删除
			plschu() {
				let dadw = {
					ids: this.scid
				}
				if (this.scid == '') {
					this.$message.error({
						message: '请选择至少一条记录',
					});
				} else {
					ztbatches(dadw).then((res) => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success'
						});
						this.getAdmin(); //调用渲染数据更新页面
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			//获取批量删除id
			handleSelectionChange(i) {
				this.scid = []
				i.forEach(item => {
					this.scid.push(item.id)
				})
			},
			// 分页
			handleCurrentChange(page) {
				ztjfen(page).then((res) => {
					this.tableData = res.data.data.list
				})
			},
			handleSizeChange(num) {
				ztfeng(num).then((res) => {
					this.tableData = res.data.data.list
				})
			},
		}
	}
</script>

<style>
	#special .top {
		line-height: 40px;
		height: 40px !important;
		margin-bottom: 20px;
	}

	#special .top .el-input {
		width: 200px;
		margin-right: 10px;
	}

	#special .top .el-button {
		margin-right: 10px;
	}

	#special .top div {
		display: inline-block;
	}

	#special .tjsc {
		text-align: right;
		margin-bottom: 10px;
	}

	#special .el-form-item .el-input {
		width: 300px;
	}

	#special .el-main {
		padding-bottom: 5px;
	}

	#special .el-table__body tr .cell {
		text-align: center;
	}

	#special .has-gutter tr th {
		text-align: center;
	}

	#special .el-footer {
		border-bottom: 0px;
	}

	#special .el-form-item {
		color: #373737;
	}

	#special .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	#special .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	#special .avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	#special .avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
